<template>
    <div>
        <a-modal v-model:visible="modalVisible" title="添加SSH公钥" @ok="handleOk" @cancel="handleCancel" width="400px">
            <a-form class="query-list-form" :model="form" ref="formRef">
                <a-form-item name="name" label="备注名" :rules="[{ required: true, message: '请输入备注名!' }]">
                    <a-input v-model:value="form.name" allowClear autocomplete="off" placeholder="请输入备注名"></a-input>
                </a-form-item>

                <a-form-item name="pubKey" label="SSH公钥" :rules="[{ required: true, message: '请输入SSH公钥!' }]">
                    <div class="form-item-code">
                        <a-input v-model:value="form.pubKey" allowClear autocomplete="off" placeholder="请输入SSH公钥"></a-input>
                    </div>
                </a-form-item>

            </a-form>
        </a-modal>
    </div>
</template>

<script setup>
import { defineProps, defineEmits, computed, ref } from 'vue';
import { XsyMessage, ZyNotification } from '@/libs/util.toast'
import { createSSH } from 'api/modules/api.account'

const form = ref({})

const props = defineProps({
    modelValue: {
        type: Boolean,
    },
});

const emit = defineEmits(['update:modelValue','refreshList']);
const modalVisible = computed({
    get: () => props.modelValue,
    set: v => emit('update:modelValue', v),
});

// 确定按钮的回调
const handleOk = () => {
    createSSH(form.value).then(res=> {
        if(res.code == 0) {
            XsyMessage.success('添加成功')
            emit('update:modelValue', false)
            emit('refreshList')
        }
    })
};

// 取消重置表单
const formRef = ref()
const handleCancel = ()=> {
    formRef.value.resetFields();
}

</script>

<style lang="less" scoped>

</style>

